<template>
  <div style="height:100%;margin-top:30px;">
    <div id="khaleesi" ref="yibei"> </div>
  </div>
</template>

<script lang="ts">
  import '../vditor/assets/scss/index.scss'
  import Vditor from '../vditor'
  export default {
    name: 'Editor',
    data() {
      return {
        vditor:{setValue(str :string){}},
        isLoading: true,
        pdata:"",
        announcement:"今天也要加油鸭",
        doc:"",
        articleId: "new-current-article"
      }
    },
    created(){
      this.doc = localStorage.getItem(this.articleId)|| ''
      if(this.doc == ''){
        console.log("can load from remote")
      }
    },
    mounted(){
      this.initVditor()
    },
    methods:{
      initVditor() {
        const options = {
          width: '100%',
          height: 900,
          placeholder: this.announcement,
          tab: '    ',
          mode: 'wysiwyg',
          debugger: true,
          hide: false,
          pin: true,
          preview: {
            delay: 1000,
            show: true
          },
          counter: {
            enable: true,
            type: 'text', // markdown
          },
          cache: {
            enable: true,
            id: this.articleId,
            after: (html: string) => {
              this.cachedSuccess(html)
            }
          },
          comment: {
            enable: true,
            add: (id: string, text: string, commentsData: ICommentsData[])=> {
              this.commentAdd(id, text, commentsData)
            }
          },
          after: () => {
            this.vditor.setValue(this.doc)
          },
          input: (value: string) => {
            this.input(value)
          },
          focus: (value: string) => {
            this.focus(value)
          },
          blur: (value: string) => {
            this.focus(value)
          },
          esc: (value: string) => {
            this.focus(value)
          },
          ctrlEnter: (value: string) => {
            this.focus(value)
          },
          select: (value: string) => {
            this.focus(value)
          }  
        }
        this.vditor = new Vditor('khaleesi', options)
        this.$nextTick(() => {
          this.isLoading = false
        })
      },

      setDefaultText() {
        localStorage.setItem('vditorkhaleesi', this.pdata)
      },
      input(value :string){
        console.log(value)
      },
      focus(value :string){
        console.log(value)
      },
      blur(value :string){
        console.log(value)
      },
      esc(value :string){
        console.log(value)
      },
      ctrlEnter(value :string){
        console.log(value)
      },
      select(value :string){
        console.log(value)
      },
      cachedSuccess(html:string) {
        console.log(html)
      },
      commentAdd(id: string, text: string, commentsData: ICommentsData[]) {
        console.log(id, text, commentsData)
      }
    }
  }
</script>